<template>
  <div class="sidebar_class">
    <SideBarLeft @child-event="childEventHandler" />
    <div class="scroll_bar_class">
      <div v-if="expand" style="height: 86vh; overflow: auto" id="sideBar">
        <el-menu
          background-color="#545c64"
          text-color="#fff"
          :default-active="activeMenu"
        >
          <el-sub-menu
            v-for="item in menuItems"
            :key="item.index"
            :index="item.index"
          >
            <template #title>
              <el-icon><Document /></el-icon> <span>{{ item.type }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="i in item.manual"
                :key="i.index"
                :index="item.index + '-' + i.index"
                style="background-color: #444444"
                @click="clickHandler"
                >{{ i.text }}</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Document } from "@element-plus/icons-vue";
import { defineEmits, onBeforeMount, getCurrentInstance, onMounted } from "vue";
import { reactive, ref } from "vue";
import SideBarLeft from "@/components/Sidebar/sideBarLeft.vue";
import store from "@/store/index.js";
import { setHead } from "@/utils/setHead";

const bus = getCurrentInstance().appContext.config.globalProperties.$bus;

const emits = defineEmits(["child-event"]);

const activeMenu = ref("");

// 假设这里是你的菜单项数据
const menuItems = reactive([
  {
    type: "Maintenance",
    manual: [
      { index: "1", text: "Aircraft Maintenance Manual" },
      { index: "2", text: "Illustrated Parts Catalog" },
    ],
    index: "1",
  },
  {
    type: "Flight",
    manual: [
      { index: "3", text: "Weight and Balance Manual" },
      { index: "4", text: "NDT Manual" },
    ],
    index: "2",
  },
  {
    type: "Wiring",
    manual: [
      { index: "5", text: "Wiring Diagram Manual" },
      { index: "6", text: "Wiring List Manual" },
      { index: "7", text: "SWPM" },
    ],
    index: "3",
  },
]);

const expand = ref(true);

const clickHandler = async (params) => {
  store.commit("setManual", params);
  //告诉父组件要展示该手册的内容
  emits("child-event", params.index);
};

const childEventHandler = async () => {
  expand.value = !expand.value;
};

onBeforeMount(() => {
  if (store.getters.getManual.index != "") {
    activeMenu.value = store.getters.getManual.index;
  }
});

onMounted(() => {
  //监听全局事件总线
  bus.on("head", (msg) => {
    setHead(document.getElementById("sideBar"), msg, 8);
  });
});
</script>

<style scoped>
.sidebar_class {
  margin-top: 0vh;
  display: flex;
  font-family: "Arial", sans-serif; /* 设置字体 */
  font-size: 14px; /* 设置字号 */
}
.scroll_bar_class {
  margin-left: 0px;
  background-color: #545c64;
}

/* .control_class {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  transition: opacity 1s; /* 过渡的属性和时间 
  }
  */
/* .control_radio {
  height: 5vh;
  width: 100%;
  background-color: #888888;
  display: flex;
  justify-content: right;
} */

/* .control_class_change {
  justify-content: flex-start;
} */
</style>
